
const options1 = {
    url: "http://localhost:3000/static/data/hm.json",
    success: result => {
        console.log(result);
        randerC(result);
        bindEventList(result);
        sortARR(result)
    }
}

function sortARR(data){
    $('#jia').on('click',function(){
       $(this).css('background', '#e9313b').siblings().css("background", '#f7f7f5');
        sortArrDown(data)
        randerC(data);
        bindEventList(data);
    })
    $('#jian').on('click',function(){
       $(this).css('background', '#e9313b').siblings().css("background", '#f7f7f5');
        sortArrup(data)
        randerC(data);
        bindEventList(data);
    })
}
function sortArrDown(res){
    let compare = function(obj1,obj2){
        let val1 = parseInt(obj1.price.split('￥')[1]);
        let val2 = parseInt(obj2.price.split('￥')[1]);
        if(val1 < val2){
            return 1;
        }else if(val1 > val2){
            return -1;
        }else{
            return 0;
        }
        
    }
    res.sort(compare)
}
function sortArrup(res){
    let compare = function(obj1,obj2){
        let val1 = parseInt(obj1.price.split('￥')[1]);
        let val2 = parseInt(obj2.price.split('￥')[1]);
        if(val1 > val2){
            return 1;
        }else if(val1 < val2){
            return -1;
        }else{
            return 0;
        }
        
    }
    res.sort(compare)
}



$.ajax(options1);

function randerC(data) {
    let res = data.map((item, index) => {
        return `<div class="ax30-1"index="${item.id}">
        <div class="pic">
            <img data-src="${item.src}" alt="">
            <span class="gouwuche">点击查看<span>
        </div>
        <div class="caption">
            <p> ${item.title}</p>
            <div class="price">
          ${item.price}         
            </div>
        </div>
    </div>
        `
    }).join('');
    setTimeout(() => {
        $('#ax30').html(res);
        new lazyLoad("#ax30  .pic img")
   }, 300);
  
}
function bindEventList(res){
    $('#ax30').on('click', '.pic',function(){
        const id = $(this).parent('div').attr("index");
        console.log(id);
        console.log(res);
         for(var i in res ){
            
                if(  res[i].id === id){
                    console.log(res[i]);
                    let data = JSON.stringify(res[i])
                    console.log(data);
                    localStorage.setItem('Detail' + res[i].id, data);
                    location.href='http://localhost:3000/dist/list.html?id='+id;
                    return true;
                }
            
        } throw 'id is Empty or Not Find!'
    } )
    }
 
